<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>pgweb</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Language" content="en">
  <link rel="stylesheet" href="static/css/bootstrap.css"></link>
  <link rel="stylesheet" href="static/css/font-awesome.css"></link>
  <link rel="stylesheet" href="static/css/app.css"></link>
  <link rel="icon" type="image/x-icon" href="static/img/icon.ico" />
  <script type="text/javascript" src="static/js/jquery.js"></script>
  <script type="text/javascript" src="static/js/ace.js"></script>
  <script type="text/javascript" src="static/js/ace-pgsql.js"></script>
  <script type="text/javascript" src="static/js/ext-language_tools.js"></script>
  <script type="text/javascript" src="static/js/bootstrap-contextmenu.js"></script>
  <script type="text/javascript" src="static/js/bootstrap-dropdown.js"></script>
  <script type="text/javascript" src="static/js/utils.js"></script>
  <script type="text/javascript" src="static/js/bootstrap3-typeahead.min.js"></script>
  <script type="text/javascript" src="static/js/app.js"></script>
  <script type="text/javascript" src="static/js/base64.js"></script>
</head>
<body>
  <div id="main">
    <div id="nav">
      <ul>
        <li id="table_content">Rows</li>
        <li id="table_structure">Structure</li>
        <li id="table_indexes">Indexes</li>
        <li id="table_constraints">Constraints</li>
        <li id="table_query" class="selected">Query</li>
        <li id="table_history">History</li>
        <li id="table_activity">Activity</li>
        <li id="table_connection">Connection</li>
      </ul>

      <div class="connection-actions">
        <a href="#" id="edit_connection" class="btn btn-default btn-sm"><i class="fa fa-database"></i> Connect</a>
        <a href="#" id="close_connection" class="btn btn-default btn-sm">Disconnect</a>
      </div>
    </div>
    <div id="sidebar">
      <div class="current-database">
        <div class="wrap">
          <i class="fa fa-database"></i> <span class="current-database-name" id="current_database"></span>
          <input class="typeahead" id="database_search" type="text" placeholder="Search database" autocomplete="off" />
          <span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
        </div>
      </div>
      <div class="objects-search">
        <div class="wrap">
          <i class="fa fa-search"></i>
          <i class="fa fa-times-circle clear-objects-filter"></i>
          <input type="text" placeholder="Filter database objects" id="filter_database_objects" />
        </div>
      </div>
      <div class="tables-list">
        <div class="wrap">
          <div id="objects"></div>
        </div>
      </div>
      <div class="table-information">
        <div class="wrap">
          <div class="title">Table Information</div>
          <div class="lines">
            <div class="line">Size: <span id="table_total_size"></span></div>
            <div class="line">Data size: <span id="table_data_size"></span></div>
            <div class="line">Index size: <span id="table_index_size"></span></div>
            <div class="line">Estimated rows: <span id="table_rows_count"></span></div>
          </div>
        </div>
      </div>
    </div>
    <div id="body">
      <div id="input">
        <div class="input-wrapper">
          <div id="custom_query"></div>
        </div>
        <div class="actions">
          <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
          <div id="explain-dropdown" class="btn-group left">
            <button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              Explain Query <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#" id="explain">Explain Query</a></li>
              <li><a href="#" id="analyze">Analyze Query</a></li>
            </ul>
          </div>
          <div id="load-query-dropdown" class="btn-group left" style="display: none">
            <button id="load-local-query" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
              Template <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
            </ul>
          </div>
          <div id="query_progress">Please wait, query is executing...</div>
          <div class="pull-right">
            <span id="result-rows-count"></span>
            <input type="button" id="json" value="JSON" class="btn btn-sm btn-default" />
            <input type="button" id="csv" value="CSV" class="btn btn-sm btn-default" />
            <input type="button" id="xml" value="XML" class="btn btn-sm btn-default" />
          </div>
        </div>
        <div id="input_resize_handler"></div>
      </div>
      <div id="output">
        <div class="wrapper">
          <table id="results" class="table">
            <thead id="results_header"></thead>
            <tbody id="results_body"></tbody>
          </table>
          <div id="results_view"></div>
        </div>
      </div>
      <div id="pagination">
        <form class="filters" action="#" id="rows_filter">
          <span>Search</span>
          <select class="column form-control"></select>
          <select class="filter form-control">
            <option value="">Select filter</option>
            <option value="equal">=</option>
            <option value="not_equal">&ne;</option>
            <option value="greater">&gt;</option>
            <option value="greater_eq">&ge;</option>
            <option value="less">&lt;</option>
            <option value="less_eq">&le;</option>
            <option value="like">LIKE</option>
            <option value="ilike">ILIKE</option>
            <option value="null">IS NULL</option>
            <option value="not_null">NOT NULL</option>
          </select>
          <input type="text" class="form-control" placeholder="Filter value" id="table_filter_value" />
          <button class="btn btn-primary btn-sm apply-filters" type="submit">Apply</button>
          <button class="btn btn-default btn-sm reset-filters"><i class="fa fa-times"></i></button>
        </form>
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm prev-page" disabled="disabled"><i class="fa fa-angle-left"></i></button>
          <button type="button" class="btn btn-default btn-sm page change-limit" title="Click to change row limit"></button>
          <button type="button" class="btn btn-default btn-sm next-page"><i class="fa fa-angle-right"></i></button>
        </div>
        <div class="current-page" data-page="1" data-pages="1">
          <span id="total_records"></span> rows
        </div>
      </div>
    </div>
  </div>

  <div id="content_modal">
    <div class="title">
      Cell Content
      <div class="actions">
        <i class="fa fa-times content-modal-action" data-action="close"></i>
        <i class="fa fa-copy content-modal-action" data-action="copy"></i>
      </div>
    </div>
    <pre class="content"></pre>
  </div>

  <div id="connection_window">
    <div class="connection-settings">
      <div class="header">
        <h1>pgweb</h1>
        <div class="version"></div>
        <div class="update alert alert-warning"></div>
      </div>

      <form role="form" class="form-horizontal" id="connection_form">
        <div class="text-center">
          <div class="btn-group btn-group-sm connection-group-switch">
            <button type="button" data="scheme" class="btn btn-default" id="connection_scheme">Scheme</button>
            <button type="button" data="standard" class="btn btn-default active" id="connection_standard">Standard</button>
            <button type="button" data="ssh" class="btn btn-default" id="connection_ssh">SSH</button>
          </div>
        </div>

        <hr/>

        <div class="connection-scheme-group">
          <div class="form-group">
            <div class="col-sm-12">
              <label>Enter server URL scheme</label>
              <input type="text" class="form-control" id="connection_url" name="url" autocomplete="off">
              <p class="help-block">
                URL format: postgres://user:password@host:port/db?sslmode=mode<br/>
                Read more on PostgreSQL <a href="https://www.postgresql.org/docs/current/static/libpq-connect.html#LIBPQ-CONNSTRING" target="_blank">connection string format</a>.
              </p>
            </div>
          </div>
        </div>

        <div class="connection-bookmarks-group">
          <div class="form-group bookmarks">
            <label class="col-sm-3 control-label">Bookmark</label>
            <div class="col-sm-9">
              <select class="form-control" id="connection_bookmarks"></select>
            </div>
          </div>
        </div>

        <div class="connection-standard-group">
          <div class="form-group">
            <label class="col-sm-3 control-label">Host</label>
            <div class="col-sm-9">
              <div class="row">
                <div class="col-sm-9 col-xs-9">
                  <input type="text" id="pg_host" class="form-control" />
                </div>
                <div class="col-sm-3 col-xs-3 no-left-padding">
                  <input type="text" id="pg_port" class="form-control" placeholder="5432" />
                </div>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Username</label>
            <div class="col-sm-9">
              <input type="text" id="pg_user" class="form-control" />
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Password</label>
            <div class="col-sm-9">
              <input type="password" id="pg_password" class="form-control" />
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Database</label>
            <div class="col-sm-9">
              <input type="text" id="pg_db" class="form-control" />
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">SSL Mode</label>
            <div class="col-sm-9">
              <select class="form-control" id="connection_ssl">
                <option value="disable">disable</option>
                <option value="require" selected="selected">require</option>
                <option value="verify-full">verify-full</option>
              </select>
            </div>
          </div>
        </div>

        <div class="connection-ssh-group">
          <hr/>

          <h3 class="text-center">SSH Connection</h3>

          <div class="form-group">
            <label class="col-sm-3 control-label">Host</label>
            <div class="col-sm-7">
              <input type="text" id="ssh_host" class="form-control" />
            </div>
            <div class="col-sm-2 no-left-padding">
              <input type="text" id="ssh_port" class="form-control" placeholder="22" />
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Credentials</label>
            <div class="col-sm-5">
              <input type="text" id="ssh_user" class="form-control" placeholder="Username" />
            </div>
            <div class="col-sm-4 no-left-padding">
              <input type="password" id="ssh_password" class="form-control" placeholder="Password" />
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">Auth Key</label>
            <div class="col-sm-5">
              <input type="text" id="ssh_key" class="form-control" placeholder="Key path" />
            </div>
            <div class="col-sm-4 no-left-padding">
              <input type="password" id="ssh_key_password" class="form-control" placeholder="Key password" />
            </div>
          </div>

          <hr/>
        </div>

        <div id="connection_error" class="alert alert-danger"></div>

        <div class="form-group">
          <div class="col-sm-12">
            <button type="submit" class="btn btn-block btn-primary open-connection">Connect</button>
            <button type="button" id="close_connection_window" class="btn btn-block btn-default">Cancel</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="tables_context_menu">
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" data-action="copy">Copy Table Name</a></li>
      <li><a href="#" data-action="analyze">Analyze Table</a></li>
      <li class="divider"></li>
      <li><a href="#" data-action="export" data-format="json">Export to JSON</a></li>
      <li><a href="#" data-action="export" data-format="csv">Export to CSV</a></li>
      <li><a href="#" data-action="export" data-format="xml">Export to XML</a></li>
      <li><a href="#" data-action="dump">Export to SQL</a></li>
      <li class="divider"></li>
      <li><a href="#" data-action="truncate">Truncate Table</a></li>
      <li><a href="#" data-action="delete">Delete Table</a></li>
    </ul>
  </div>
  <div id="view_context_menu">
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" data-action="view_def">View Definition</a></li>
      <li><a href="#" data-action="copy">Copy View Name</a></li>
      <li><a href="#" data-action="copy_def">Copy View Definition</a></li>
      <li class="divider"></li>
      <li><a href="#" data-action="export" data-format="json">Export to JSON</a></li>
      <li><a href="#" data-action="export" data-format="csv">Export to CSV</a></li>
      <li><a href="#" data-action="export" data-format="xml">Export to XML</a></li>
      <li class="divider"></li>
      <li><a href="#" data-action="delete">Delete View</a></li>
    </ul>
  </div>
  <div id="current_database_context_menu">
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" data-action="show_db_stats">Show Database Stats</a></li>
      <li><a href="#" data-action="download_db_stats">Download Database Stats</a></li>
      <li class="divider"></li>
      <li><a href="#" data-action="server_settings">Show Server Settings</a></li>
      <li class="divider"></li>
      <li><a href="#" data-action="export">Export SQL dump</a></li>
    </ul>
  </div>
  <div id="results_header_menu">
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" data-action="unique_values" data-counts="false">Unique Values</a></li>
      <li><a href="#" data-action="unique_values" data-counts="true">Unique Values + Counts</a></li>
      <li><a href="#" data-action="num_stats">Numeric stats (min/max/avg)</a></li>
      <li><a href="#" data-action="copy_name">Copy Column Name</a></li>
    </ul>
  </div>
  <div id="results_row_menu">
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" data-action="display_value">Display Value</a></li>
      <li><a href="#" data-action="copy_value">Copy Value</a></li>
      <li><a href="#" data-action="filter_by_value">Filter Rows By Value</a></li>
    </ul>
  </div>
  <div id="error_banner"></div>
</body>
</html>
